<script setup lang="ts">
import CpNacBar from '@/components/CpNavBar.vue'
import { showToast, type CalendarDayItem } from 'vant'
import { ref } from 'vue'
import { OptionalArry } from './menu'

// 默认选择
const defaultActive = ref(OptionalArry[0].date)
const defaultActiveArry = ref(OptionalArry[0].opItem)

// 日历相关
const cacalendarShow = ref(false)
const onConfirm = () => {
  cacalendarShow.value = false
}

// 获取时间相关
const getTodayDate = (dataInfo: Date) => {
  const today = dataInfo
  const year = today.getFullYear()
  const month = (today.getMonth() + 1).toString()
  const months = (today.getMonth() + 1).toString().padStart(2, '0')
  const day = today.getDate().toString()
  const days = today.getDate().toString().padStart(2, '0')
  const week = today.getDay()
  const weekArr = ['日', '一', '二', '三', '四', '五', '六']
  const weekInfo = weekArr[week]
  const nowDataInfo = `${year}-${months}-${days}`
  return { year, month, day, weekInfo, nowDataInfo }
}

// 自定义日历中的日期
const formatter = (day: CalendarDayItem) => {
  if (getTodayDate(day.date as Date).day === '1') day.className = 'firstItem'
  OptionalArry.forEach((item) => {
    // console.log(item.date.indexOf(getTodayDate(day.date as Date).nowDataInfo))
    if (item.date.indexOf(getTodayDate(day.date as Date).nowDataInfo) > -1) {
      day.topInfo = String(day.text)
      if (item.option) {
        day.bottomInfo = '有号'
        day.text = ''
        day.className = 'optional'
      } else {
        day.bottomInfo = '约满'
        day.text = ''
        day.className = 'unable'
        day.type = 'disabled'
      }
    }
  })
  // console.log(getTodayDate(day.date as Date).nowDataInfo)
  return day
}

// 预约
const surplusFn = (info: any) => {
  console.log(info)
  showToast('预约成功')
}
</script>

<template>
  <CpNacBar title="总台技术局新媒体技术大练兵" />
  <div class="cacalendarBox">
    <div class="moreDay" @click="cacalendarShow = true">更多<br />日期</div>
    <ul class="calendarList">
      <li
        class="calendarItem"
        v-for="item in OptionalArry"
        :key="item.date"
        :class="{ active: defaultActive === item.date }"
      >
        <div class="calendarWeek">
          周{{ getTodayDate(new Date(item.date)).weekInfo }}
        </div>
        <div class="calendarDate">{{ item.date.slice(8, 10) }}</div>
        <div :class="{ calendarStatus: true, unable: !item.option }">
          {{ item.option ? '可约' : '约满' }}
        </div>
      </li>
    </ul>
    <!-- :min-date="today" 今天之前不能选  -->
    <van-calendar
      class="calendar"
      type="single"
      :formatter="formatter"
      v-model:show="cacalendarShow"
      switch-mode="month"
      @confirm="onConfirm"
    />
  </div>
  <div class="tipInfo">左右滑动选择更多日期</div>
  <div class="conBox">
    <div
      class="conItem"
      v-for="(item, index) in defaultActiveArry"
      :key="index"
    >
      <div class="leftBox">
        <h2>
          {{ Number(item.time[0].end.slice(0, 2)) > 14 ? '下午' : '上午' }}
        </h2>
        <p>{{ item.time[0].start }} — {{ item.time[0].end }}</p>
      </div>
      <div class="rightBox">
        <!-- 取消 -->
        <div v-if="item.select" class="cancel">取消</div>
        <!-- 约满 -->
        <div v-if="item.num === 0 && !item.select" class="reservation">
          约满
        </div>
        <!-- 预约 -->
        <div
          v-if="item.num > 0 && !item.select"
          @click="surplusFn(item)"
          class="surplus"
        >
          <div class="top">预约</div>
          <div class="bottom">余3</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cacalendarBox {
  position: relative;
  width: 702px;
  height: 160px;
  margin: 0 auto;
  margin-top: 112px;
  overflow: hidden;

  .moreDay {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    width: 98px;
    height: 160px;
    text-align: center;
    border: 1px solid var(--cp-primary);
    border-radius: 4px;
    background-color: #fff;
    color: var(--cp-primary);
    font-size: 28px;
    padding-top: 40px;
  }
  .calendarList {
    height: 180px; // 有个滑条 为了隐藏滑条
    display: flex;
    flex-wrap: nowrap;
    overflow-y: hidden;
    .calendarItem {
      padding: 16px 0;
      flex: 0 0 auto;
      width: 128px;
      height: 128px;
      font-size: 28px;
      color: #999999;
      border-radius: 4px;
      text-align: center;
      background-color: #fff;
      margin-right: 2px;
      .calendarWeek {
        height: 40px;
        line-height: 40px;
        color: #999999;
      }
      .calendarDate {
        height: 40px;
        line-height: 40px;
        color: #212121;
      }
      .calendarStatus {
        height: 40px;
        line-height: 40px;
        color: var(--cp-primary);
        &.unable {
          color: #999999;
        }
      }
    }
    .calendarItem.active {
      color: #fff;
      background-color: var(--cp-primary);
      .calendarWeek {
        height: 40px;
        line-height: 40px;
        color: #fff;
      }
      .calendarDate {
        height: 40px;
        line-height: 40px;
        color: #fff;
      }
      .calendarStatus {
        height: 40px;
        line-height: 40px;
        color: #fff;
        &.unable {
          color: #fff;
        }
      }
    }
  }
  :deep(.van-calendar__popup .van-popup__close-icon) {
    font-size: 44px;
  }
  :deep(.calendar) {
    .van-calendar__days {
      padding-top: 10px;
    }
    .van-calendar__header-title {
      display: none;
    }
    .van-calendar__header-subtitle--with-swicth {
      height: 88px;
      justify-content: center;
      .van-calendar__header-subtitle-text {
        flex: none;
      }
      .van-calendar__header-action {
        font-size: 44px;
        color: var(--cp-primary);
        :first-child {
          margin-right: 141px;
        }
        :last-child {
          margin-left: 141px;
        }
      }
    }
    .van-calendar__weekdays {
      height: 90px;
      .van-calendar__weekday {
        font-size: 30px;
        color: #333333;
        line-height: 90px;
      }
    }
    .van-calendar__day {
      width: calc(14.285% - 8px);
      margin-left: 8px;
      height: 96px;
      line-height: 96px;
      font-size: 36px;
      color: #333;
      border-radius: 8px;
      overflow: hidden;
      .van-calendar__selected-day {
        width: 100%;
        height: 100%;
        .van-calendar__bottom-info {
          color: #fff !important;
        }
      }
    }
    .firstItem {
      width: 14.285% !important;
    }
    .van-calendar__day.optional {
      position: relative;
      background-color: #ebe3ff;
      .van-calendar__top-info {
        position: absolute;
        top: 0;
        left: 0;
        height: 48px;
        line-height: 48px;
        background-color: var(--cp-primary);
        color: #fff;
        font-size: 36px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }
      .van-calendar__bottom-info {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 48px;
        line-height: 48px;
        color: var(--cp-primary);
        font-size: 24px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
    .van-calendar__day.unable {
      background-color: #dcdcdc;
      .van-calendar__top-info {
        position: absolute;
        top: 0;
        left: 0;
        height: 48px;
        line-height: 48px;
        color: #fff;
        font-size: 36px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }
      .van-calendar__bottom-info {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 48px;
        color: #fff;
        line-height: 48px;
        font-size: 24px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
    .van-calendar__confirm {
      height: 96px;
    }
  }
}

.tipInfo {
  width: 750px;
  height: 40px;
  line-height: 40px;
  font-size: 28px;
  color: #999999;
  text-align: center;
  margin: 16px auto 24px;
}

.conBox {
  width: 702px;
  margin: 0 auto;
  .conItem {
    box-sizing: border-box;
    padding: 24px;
    display: flex;
    width: 100%;
    height: 146px;
    background: #ffffff;
    border-radius: 4px;
    justify-content: space-between;
    margin-bottom: 24px;
    .leftBox {
      flex: 1;
      h2 {
        font-size: 32px;
        font-weight: 500;
        color: #212121;
        height: 45px;
        line-height: 45px;
        margin-bottom: 13px;
      }
      p {
        font-weight: 500;
        font-size: 28px;
        color: #666666;
        height: 40px;
        line-height: 40px;
      }
    }
    .rightBox {
      width: 98px;
      height: 98px;
      line-height: 98px;
      text-align: center;
      color: var(--cp-primary);
      background-color: #ebe3ff;
      .cancel,
      .reservation,
      .surplus {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        font-size: 28px;
      }
      .reservation {
        background: #dcdcdc;
        color: #fff;
      }
      .surplus {
        .top {
          height: 49px;
          line-height: 49px;
          background-color: var(--cp-primary);
          color: #ebe3ff;
        }
        .bottom {
          height: 49px;
          line-height: 49px;
          background-color: #ebe3ff;
          color: var(--cp-primary);
        }
      }
    }
  }
}
</style>
